<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <h4 class="class-h4">用户注册</h4>
    <van-form @submit="onSubmit">
      <van-field
        v-model="userForm.account"
        name="学号"
        label="学号"
        placeholder="学号"
        :rules="[{ required: true, message: '请填写学号' }]"
      />
      <van-field
        v-model="userForm.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="userForm.fullName"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">身份</div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <van-radio-group
              v-model="userForm.userTypeId"
              direction="horizontal"
              icon-size="15px"
            >
              <van-radio
                v-for="item in userTypeList"
                :key="item.userTypeId"
                :name="item.userTypeId"
                >{{ item.userTypeName }}</van-radio
              >
            </van-radio-group>
          </div>
        </div>
      </div>
      <van-field
        v-model="userForm.mobile"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="userForm.email"
        name="邮箱"
        label="邮箱"
        placeholder="邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">头像</div>
        <div class="van-cell__value van-field__value">
          <div class="van-field__body">
            <van-uploader
              v-model="fileList"
              :after-read="afterRead"
              multiple
              :max-count="1"
            />
          </div>
        </div>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from "vant";
import { uploadAccountApi } from "@/api/user.js";
import { userAddApi } from "@/api/user.js";
import { getUserTypeApi } from "@/api/user.js";

export default {
  data() {
    return {
      userForm: {
        fullName: "",
        mobile: "",
        account: "",
        password: "",
        avatar: "",
        openId: "openId",
        email: "",
        userTypeId: "", //是项目经理还是学生 还是管理员
        pmId: 0,
        studentId: 0,
      },
      fileList: [], //头像上传文件数据
      userTypeList: [], //用户类型列表
    };
  },
  methods: {
    // 判断文件类型
    beforeRead(file) {
      if (
        file.type != "image/png" &&
        file.type != "image/jpg" &&
        file.type != "image/jpeg"
      ) {
        Toast("请上传png或jpg格式图片");
        return false;
      }
      return true;
    },
    //图片上传
    afterRead(file) {
      //此时可以自行将文件上传至服务器
      const loading = Toast.loading({
        forbidClick: true,
        text: "上传中，请稍候...",
      });
      //调用后端上传接口
      uploadAccountApi(file)
        .then((res) => {
          //this.fileList.push("https://localhost:5001" + res.fileName);
          this.userForm.avatar = res.fileName;
        })
        .finally(() => {
          loading.close();
        });
    },
    //获取用户类型
    getUserType() {
      getUserTypeApi().then((res) => {
        this.userTypeList = res.data;
      });
    },
    //表单提交
    onSubmit() {
      userAddApi(this.userForm).then((res) => {
        if (res.code == 200) {
          Toast({
            message: res.message,
            forbidClick: true,
          });
        } else {
          Toast({
            message: "注册失败",
            forbidClick: true,
          });
        }
      });
    },
    //导航返回按钮
    onClickLeft() {
      this.$router.push("/login");
    },
  },
  created() {
    this.getUserType();
  },
};
</script>
<style>
.span-uploader {
  text-align: center;
  margin-left: 300px;
  margin-top: 10px;
}
.class-h4 {
  text-align: center;
  margin: 20px;
}
</style>